import { Form, Input, Row, Col, Radio, Select } from 'antd';
import React, { useState } from 'react';

export default function FormItems({ data = {}, isEdit = false, form, formLayout }) {
  const { getFieldDecorator } = form;

  const fullWidthFormLayout = {
    labelCol: { span: formLayout.labelCol.span / 2 },
    wrapperCol: { span: formLayout.wrapperCol.span + formLayout.labelCol.span / 2 },
  };

  const [isComponent, setIsComponent] = useState(data.types === 0);

  return (
    <>
      <Row>
        <Col span={12}>
          <Form.Item label="父级">
            <Input size="large" value={isEdit ? data.pidName : data.treeItem.title} disabled />
          </Form.Item>
          <Form.Item label="类型">
            {getFieldDecorator('types', {
              initialValue: data.types,
              rules: [{ required: true, message: '请选择模块类型' }],
            })(
              <Select placeholder="请选择模块类型" onChange={val => setIsComponent(!val)}>
                <Select.Option value={0}>组件</Select.Option>
                <Select.Option value={1}>页面</Select.Option>
                <Select.Option value={2}>菜单</Select.Option>
              </Select>,
            )}
          </Form.Item>
          <Form.Item label="端口">
            {getFieldDecorator('port', {
              initialValue: data.port || 'W',
              rules: [{ required: true, message: '请选择端口' }],
            })(
              <Select placeholder="请选择端口">
                <Select.Option value="W">web端</Select.Option>
                <Select.Option value="H5_AO">辅营H5端</Select.Option>
                <Select.Option value="H5_DP">服务补偿H5端</Select.Option>
                {/* <Select.Option value="H">h5端</Select.Option> */}
              </Select>,
            )}
          </Form.Item>
          <Form.Item label="功能权限">
            {getFieldDecorator('functional', {
              initialValue: data.functional || '0',
              rules: [{ required: true, message: '请选择功能权限' }],
            })(
              <Select placeholder="请选择功能权限">
                <Select.Option value="0">业务功能权限</Select.Option>
                <Select.Option value="1">系统基础功能权限</Select.Option>
              </Select>,
            )}
          </Form.Item>
          <Form.Item label="API资源路径">
            {getFieldDecorator('resourceCode', {
              initialValue: data.resourceCode,
              rules: [{ required: true, message: 'API资源路径' }],
            })(<Input size="large" placeholder="API资源路径" allowClear />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="名称">
            {getFieldDecorator('name', {
              initialValue: data.name,
              rules: [{ required: true, message: '请输入名称' }],
            })(<Input size="large" placeholder="请输入名称" allowClear />)}
          </Form.Item>
          <Form.Item label="状态">
            {getFieldDecorator('status', {
              initialValue: data.status || true,
              rules: [{ required: true, message: '请选择状态' }],
            })(
              <Radio.Group>
                <Radio value={true}>启用</Radio>
                <Radio value={false}>禁用</Radio>
              </Radio.Group>,
            )}
          </Form.Item>
          <Form.Item label="图标">
            {getFieldDecorator('icon', {
              initialValue: data.icon,
              // rules: [{ required: true, message: '请输入图标' }],
            })(<Input size="large" placeholder="请输入图标" allowClear />)}
          </Form.Item>
          {isComponent && (
            <Form.Item label="组件ID">
              {getFieldDecorator('componentsId', {
                initialValue: data.componentsId,
                rules: [{ required: true, message: '请输入组件ID' }],
              })(<Input size="large" placeholder="请输入组件ID" allowClear />)}
            </Form.Item>
          )}
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          {!isComponent && (
            <>
              <Form.Item label="URL" {...fullWidthFormLayout}>
                {getFieldDecorator('resourceUrl', {
                  initialValue: data.resourceUrl,
                  rules: [{ required: true, message: '请输入URL' }],
                })(<Input size="large" placeholder="请输入URL" allowClear />)}
              </Form.Item>
              <Form.Item label="包含URL" {...fullWidthFormLayout}>
                {getFieldDecorator('containUrl', {
                  initialValue: data.containUrl,
                  rules: [{ message: '请输入包含URL(多个路径用分号隔开)' }],
                })(
                  <Input size="large" placeholder="请输入包含URL(多个路径用分号隔开)" allowClear />,
                )}
              </Form.Item>
            </>
          )}
          <Form.Item label="备注" {...fullWidthFormLayout}>
            {getFieldDecorator('remarks', {
              initialValue: data.remarks,
            })(<Input size="large" placeholder="请输入备注" allowClear />)}
          </Form.Item>
        </Col>
      </Row>
    </>
  );
}
